//内容加载

(function ($) {
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    })
    //地址
    const origin = location.origin
    let getlist = origin + '/getcatnews/'
    let detail = origin + '/newsdetail/'
    window.addEventListener('load', function () {

        //容器
        let contentList = dom1('.content-list')

        //当前频道
        let data_id = 0
        //当前页数
        let page = 1
        //内容缓存
        let conCache = []
        conCache[0] = contentList.innerHTML

        //按钮点击事件
        $('.nav ul').on('tap', 'li', function (e) {
            let _this = this
            data_id = this.getAttribute('data-id')
            page = 1

            //按钮效果变化
            $('.nav ul li').each(function (index, elem) {
                if (elem.getAttribute('data-id') == data_id) {
                    elem.className = 'active'
                } else {
                    elem.className = ''
                }
            })
            //请求数据
            if (conCache[data_id]) {
                contentList.innerHTML = conCache[data_id]
            } else {
                $.ajax(`${getlist}${data_id}/1`, {
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        conCache[data_id] = contentList.innerHTML = elemObj(data)
                        //显示信息板
                        showInfo(`已为您推荐${data.per_page}篇文章`)
                    }
                })
            }
        })

        let throttle = false
        //上拉刷新事件
        let contentWrap = document.querySelector('#content-wrap')
        window.addEventListener('scroll', function (e) {
            if (window.scrollY >= contentWrap.clientHeight - window.innerHeight - 50) {
                if (throttle) return
                throttle = true
                //加载标识
                if (!dom1('#loading')) {
                    contentList.innerHTML += `
                        <div style="text-align:center;" id="loading">
                            正在加载中……
                        </div>
                    `
                }
                contentList.appendChild(dom1('#loading'))
                $.ajax(`${getlist}${data_id}/${++page}`, {
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        //节流开关
                        throttle = false
                        //添加内容
                        contentList.innerHTML += elemObj(data)
                        //隐藏添加内容字样
                        dom1('#loading').style.display = 'none'
                        //显示信息板
                        showInfo(`已为您推荐${data.per_page}篇文章`)
                    },
                    error: function (data) {
                        throttle = false
                        showInfo('加载数据错误')
                    }
                })
            }
        })
    })
    //获取dom元素
    function dom1(elem) {
        return document.querySelector(elem)
    }

    function dom2(elem) {
        return document.querySelectorAll(elem)
    }

    //显示信息层
    function showInfo(text) {
        let floatInfo = dom1('.float-info')
        floatInfo.style.display = 'block'
        floatInfo.innerText = text
        $.later(function () {
            floatInfo.style.display = 'none'
        }, 1500)
    }

    //组件模板
    function elemObj(data) {
        let htmlElem = ''
        let _data = data.data
        _data.forEach(res => {
            htmlElem += `
            <section class="content-area content-area10101">
                <div class="img-area">
                    <a href="${detail}${res.id}"><img src="${res.cover}" /></a>
                </div>
                <div class="txt-area">
                    <a href="${detail}${res.id}">
                        <p class="txt-area-title">${res.title}</p>
                    </a>
                    <div class="txt-area-mark">
                        <!--<span>热</span>
                        <span>顶置</span>
                        <span>专题</span>-->
                        <div class="txt-area-mark-right">
                            <i>v</i>
                            <b>${res.from}</b>
                        </div>
                    </div>
                </div>
            </section>
            `
        })
        return htmlElem
    }
})(mui)